
@keyframes fadeIn {
    from {
        transform: scale(0.3);
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        transform: scale(0.3);
        opacity: 0;
    }
}

.wdu-popover {
    .wdu-box();
    max-width: 600px;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    top: 0;
    left: 0;
    width: max-content;

    &__active {
        visibility: visible;
        animation: fadeIn .2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 forwards normal;
    }

    &__hidden {
        animation: fadeOut .2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 forwards normal;
    }

    @borderColor: #e7e7e7;

    .popoverCorner {
        .corner();
        background-color: white;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
    }

    &__top {
        transform-origin: bottom;

        &::before {
            .popoverCorner();
            border-color: transparent @borderColor @borderColor transparent;
            bottom: -6px;
            left: calc(50% - 4px);
        }
    }

    &__bottom {
        transform-origin: top;

        &::after {
            .popoverCorner();
            border-color: @borderColor transparent transparent @borderColor ;
            top: -6px;
            left: calc(50% - 4px);
        }
    }

    &__left {
        transform-origin: right;

        &::before {
            .popoverCorner();
            border-color: @borderColor @borderColor transparent transparent;
            right: -6px;
            top: calc(50% - 5px);
        }
    }

    &__right {
        transform-origin: left;

        &::before {
            .popoverCorner();
            border-color: transparent transparent @borderColor @borderColor ;
            left: -6px;
            top: calc(50% - 5px);
        }
    }

}